<template>
	<view class="filtrate-condition">
		<scroll-view scroll-y="true" class="filtrate-condition__left">
			<view v-for="item of criteriaList" :key="item.id" :id="`${item.id}Classify`" class="classify-item"
				:class="{active:classifyItemActive === `${item.id}Classify`,selected:item.selected}"
				@tap="tapScrollIntoView(item.id)">
				<view class="ellipsis-line-clamp">
					{{item.text}}
				</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" class="filtrate-condition__right">
			<view v-for="item of activeCriteriaList" :id="item.id" :key="item.id" class="condition-item-empty">
				<ConditionItem :active="classifyItemActive" :data-id="item.id" v-bind="item" v-model="item.value"
					@change="conditionChange">
				</ConditionItem>
			</view>
			<view class="placeholder" />
		</scroll-view>
	</view>
</template>
<script lang="ts">
	import { defineComponent } from "vue"
	export default defineComponent({
		// #ifdef MP-WEIXIN
		options: {
			virtualHost: true
		},
		// #endif
	})
</script>
<script setup lang="ts">
	import type { ScrollViewOnScrollEvent } from '@uni-helper/uni-app-types';
	import type { Criteria } from '@/types/filtrate-condition';
	import { isEmpty } from '@/utils/util';
	import { scrollPosition } from '@/utils/node';
	import { ref, getCurrentInstance, onBeforeMount, toRaw, watch, computed } from 'vue';
	import ConditionItem from './condition-item.vue';
	const props = withDefaults(defineProps<{
		only ?: boolean;
		criteriaList : Criteria[]
	}>(), {
		criteriaList: () => [],
		only: false
	});
	const emit = defineEmits<{ change : [query: Record<string, any>, option?: AnyObj] }>();

	const query = ref<Record<string, any>>({});
	function conditionChange(id : string, fieldValues : [string, any][], option : AnyObj) {

		if (props.only) {
			for (const item of props.criteriaList.filter(item => item.id !== id)) {
				item.value = '';
			}
		}

		const findItem = props.criteriaList.find(item => item.id === id);
		if (findItem) {
			if (isEmpty(findItem.value)) {
				findItem.selected = false;
			} else if (Array.isArray(findItem.value)) {
				findItem.selected = findItem.value.some((item : any) => !isEmpty(item))
			} else {
				findItem.selected = true;
			}
		}
		if (props.only) {
			query.value = {}
		}

		for (const [field, value] of fieldValues) {
			if (isEmpty(value)) {
				Reflect.deleteProperty(query.value, field);
			} else {
				query.value[field] = value;
			}
		}

		for (const [key, value] of Object.entries(query.value)) {
			if (isEmpty(value)) {
				Reflect.deleteProperty(query.value, key);
			}
		}
		emit('change', toRaw(query.value), option);
	}

	const currentInstance = getCurrentInstance();
	const classifyItemActive = ref('');
	const scrollIntoView = ref('');
	function tapScrollIntoView(id : string) {
		scrollIntoView.value = id;
		classifyItemActive.value = `${id}Classify`;
	}

	const activeCriteriaList = computed(() => {
		return props.criteriaList.filter(item => item.id === scrollIntoView.value);
	});

	function activeFirst() {
		const [first] = props.criteriaList;
		if (first) {
			tapScrollIntoView(first.id);
			// classifyItemActive.value = `${first.id}Classify`;
		}
	}

	watch(() => props.criteriaList, () => {
		for (const item of props.criteriaList) {
			if (isEmpty(item.value)) {
				item.selected = false;
			} else if (Array.isArray(item.value)) {
				item.selected = item.value.some((item : any) => !isEmpty(item))
			} else {
				item.selected = true;
			}
		}
	}, { deep: true })

	function init() {
		const initQuery : Record<string, any> = {};
		for (const item of props.criteriaList) {
			item.selected = !isEmpty(item.value);
			if (item.type === 'radio' || item.type === 'checkbox') {
				initQuery[item.field as string] = toRaw(item.value);
			} else if (item.type === 'rangeInput') {
				if (!isEmpty(item.value[0])) {
					initQuery[item.field[0]] = item.value[0]
				}
				if (!isEmpty(item.value[1])) {
					initQuery[item.field[1]] = item.value[1]
				}
			}
		}
		query.value = initQuery;
	}

	onBeforeMount(() => {
		init();
		activeFirst();
	})


	function scroll(event : ScrollViewOnScrollEvent) {
		scrollPosition(event, currentInstance, ['.filtrate-condition__right', '.condition-item-empty'], (index : number, id : string) => {
			if (index <= 0) {
				activeFirst();
				return;
			}
			classifyItemActive.value = `${id}Classify`;
		});
	}

	defineExpose({
		reset() {
			query.value = {};
			for (const item of props.criteriaList) {
				item.selected = false;
				if (item.type === 'checkbox' || item.type === 'rangeInput' || item.type === 'daterange') {
					item.value = [];
				} else {
					item.value = null;
				}
			}
		},
		getQuery() {
			return toRaw(query.value);
		}
	})
</script>

<style scoped lang="scss">
	.filtrate-condition {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex: 1;

		&__left {
			display: inline-flex;
			flex-direction: column;
			flex-shrink: 0;
			width: 200rpx;
			height: 100%;
			background-color: $uni-bg-color;

			.classify-item {
				position: relative;
				display: inline-flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				padding: 0 20rpx;
				height: 128rpx;
				font-size: 30rpx;
				color: #929292;
				word-wrap: break-word;
				word-break: break-all;

				&.active {
					background-color: white;
					color: #000000;

					&:after {
						position: absolute;
						top: 40rpx;
						right: 0;
						bottom: 40rpx;
						// transform: translateY(-50%);
						content: '';
						display: inline-block;
						width: 3rpx;
						border-radius: 3rpx;
						overflow: hidden;
						background: #FF710A;
					}
				}

				&.selected {
					// &:before {
					// 	position: absolute;
					// 	top: 50%;
					// 	left: 10rpx;
					// 	transform: translateY(-50%);
					// 	content: '';
					// 	display: inline-block;
					// 	width: 8rpx;
					// 	height: 8rpx;
					// 	border-radius: 50%;
					// 	overflow: hidden;
					// 	background-color: red;
					// }
				}
			}
		}

		&__right {
			position: relative;
			display: inline-flex;
			flex-direction: column;
			width: 550rpx;
			height: 100%;
			padding: 0 0 20rpx 0;
			box-sizing: border-box;
			background-color: white;

			.placeholder {
				display: inline-flex;
				width: 100%;
				height: 90%;
			}

		}
	}
</style>